<template>
    <div class="page">
        <div class="no-data-wrap" v-if="tableData.length == 0 && !searchQuery.name && !searchQuery.enabled">
            <el-empty description="暂无部门">
                <el-button type="primary" @click="add">创建部门</el-button>
            </el-empty>
        </div>
        <div class="flex-column" v-else>
            <div class="search-simple-wrap">

                <div class="earch-simple-item" style="width:180px"></div>
                <el-button type="primary" :icon="Plus" style="margin-left:auto;width:124px" @click="add">新增部门</el-button>
            </div>
            <div class="grid-wrap">
                <el-table style="width:100%;height:100%"
                        row-key="id"
                        :tree-props="{ children: 'child_list', }"
                        :data="tableData">
                    <el-table-column label="部门名称" prop="department_name"></el-table-column>
                   
                    <el-table-column label="操作" fixed="right" width="240px">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑部门</el-button>
                            <el-button style="margin-right:12px" link type="primary" size="small" @click="addChild(scope.row)">添加子部门</el-button>
                            <el-button style="margin-right:12px" link type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>

                            
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <view-dialog :dialogVisible="dialogVisible" 
                    :detail="detail"
                    :departTree="tableData" 
                    :state="dialogState" 
                    @success="dialogSuccess"
                    @close="dialogVisible = false"></view-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive,watch, onMounted } from 'vue'
import viewDialog from './component/view-dialog/index'
import { ElMessageBox,ElMessage } from 'element-plus'

import { Search,Plus } from '@element-plus/icons-vue'

import { getDepartList, deleteDepart } from 'services/setting'

import type {Depart} from './index'


const dialogState = ref('edit')

const dialogVisible = ref(false)

const searchQuery = reactive({
    parent_id:null,
    name:'',
    enabled:undefined
})

const detail = ref<Depart>()

const add = () => {
    dialogState.value = 'add'
    detail.value = undefined
    dialogVisible.value = true;
}

const edit = (row:Depart) => {
    dialogState.value = 'edit'
    dialogVisible.value = true
    detail.value = {...row}
}


const addChild = (row:Depart) => {
    detail.value =  {
        id:null,
        department_name:'',
        parent_id:row.id,
        remark: '',
        sort:null,
        leader:'',
        leader_phone:'',
        enabled:undefined
    }
    dialogState.value = 'add'
    dialogVisible.value = true
}

const search = () => {
    getList()
}

const tableData = ref<Depart[]>([])

const getList = () => {
    getDepartList().then((res:any) => {
        tableData.value = res.tree_list;
    })
}

const dialogSuccess = () => {
    getList();
    dialogVisible.value = false
}

const handleDelete = (row:Depart) => {
    ElMessageBox.confirm('确认进行【删除】操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then((result) => {
        deleteDepart({id:row.id || null}).then(res => {
            getList()
            ElMessage.success('删除成功')
        })
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}


onMounted(() => {
    getList()
})
</script>
